<template>
  <div class="category-page">
    <!-- 页面头部 -->
    <div class="category-header" :style="{ backgroundColor: category.color }">
      <div class="container">
        <div class="header-content">
          <div class="category-icon" :style="{ backgroundColor: category.iconBgColor }">
            <component :is="category.icon" />
          </div>
          <div class="header-text">
            <h1>{{ category.name }}</h1>
            <p>{{ category.description }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <div class="content-wrapper">
          <!-- 左侧边栏 -->
          <aside class="sidebar">
            <div class="sidebar-section">
              <h3>知识分类</h3>
              <ul class="category-list">
                <li 
                  v-for="cat in allCategories"
                  :key="cat.id"
                  :class="['category-item', { active: currentCategoryId === cat.id }]"
                  @click="navigateToCategory(cat.id)"
                >
                  <span class="category-bullet" :style="{ backgroundColor: cat.color }"></span>
                  <span class="category-name">{{ cat.name }}</span>
                  <span class="category-count">{{ cat.articleCount }}</span>
                </li>
              </ul>
            </div>
            
            <div class="sidebar-section">
              <h3>热门标签</h3>
              <div class="tags-container">
                <span 
                  v-for="tag in 热门Tags" 
                  :key="tag.id"
                  class="tag"
                  @click="filterByTag(tag.name)"
                >
                  {{ tag.name }}
                  <span class="tag-count">{{ tag.count }}</span>
                </span>
              </div>
            </div>
            
            <div class="sidebar-section">
              <div class="category-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ category.articleCount }}</span>
                  <span class="stat-label">篇文章</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ category.views }}</span>
                  <span class="stat-label">次阅读</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ category.faqCount }}</span>
                  <span class="stat-label">个问题</span>
                </div>
              </div>
            </div>
          </aside>
          
          <!-- 右侧内容 -->
          <main class="content">
            <!-- 筛选和排序 -->
            <div class="filter-sort-section">
              <div class="filter-options">
                <button 
                  v-for="filter in filterOptions"
                  :key="filter.id"
                  :class="['filter-btn', { active: activeFilter === filter.id }]"
                  @click="activeFilter = filter.id"
                >
                  {{ filter.name }}
                </button>
              </div>
              
              <div class="sort-options">
                <label for="sort">排序方式：</label>
                <select id="sort" v-model="sortBy" @change="handleSortChange">
                  <option value="newest">最新发布</option>
                  <option value="popular">最受欢迎</option>
                  <option value="alphabetical">字母顺序</option>
                </select>
              </div>
            </div>
            
            <!-- 文章列表 -->
            <div class="articles-section">
              <h2>相关文章</h2>
              <div class="articles-list">
                <article 
                  v-for="article in sortedArticles"
                  :key="article.id"
                  class="article-item"
                  @click="viewArticleDetail(article.id)"
                >
                  <div class="article-image">
                    <img :src="article.image" :alt="article.title" />
                  </div>
                  <div class="article-content">
                    <h3>{{ article.title }}</h3>
                    <p class="article-excerpt">{{ article.excerpt }}</p>
                    <div class="article-meta">
                      <span class="article-date">{{ article.publishDate }}</span>
                      <span class="article-views">{{ article.readCount }} 阅读</span>
                      <span class="article-comments">{{ article.commentCount }} 评论</span>
                    </div>
                    <div class="article-tags">
                      <span 
                        v-for="tag in article.tags"
                        :key="tag"
                        class="article-tag"
                      >
                        {{ tag }}
                      </span>
                    </div>
                  </div>
                </article>
              </div>
              
              <!-- 分页 -->
              <div class="pagination">
                <button class="page-btn" @click="prevPage" :disabled="currentPage === 1">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="currentColor"/>
                  </svg>
                  上一页
                </button>
                
                <div class="page-numbers">
                  <button 
                    v-for="page in totalPages"
                    :key="page"
                    :class="['page-number', { active: currentPage === page }]"
                    @click="goToPage(page)"
                  >
                    {{ page }}
                  </button>
                </div>
                
                <button class="page-btn" @click="nextPage" :disabled="currentPage === totalPages">
                  下一页
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.59 7.41L10 6L16 12L10 18L8.59 16.59L13.17 12L8.59 7.41Z" fill="currentColor"/>
                  </svg>
                </button>
              </div>
            </div>
            
            <!-- 常见问题 -->
            <div class="faq-section">
              <h2>常见问题</h2>
              <div class="faq-list">
                <div 
                  v-for="faq in category.faqs"
                  :key="faq.id"
                  class="faq-item"
                  @click="toggleFaq(faq.id)"
                >
                  <div class="faq-question">
                    <h3>{{ faq.question }}</h3>
                    <div class="faq-icon" :class="{ active: activeFaq === faq.id }">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="currentColor"/>
                      </svg>
                    </div>
                  </div>
                  <div class="faq-answer" v-show="activeFaq === faq.id">
                    <p>{{ faq.answer }}</p>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 推荐阅读 -->
            <div class="recommended-section">
              <h2>推荐阅读</h2>
              <div class="recommended-grid">
                <div 
                  v-for="article in recommendedArticles"
                  :key="article.id"
                  class="recommended-item"
                  @click="viewArticleDetail(article.id)"
                >
                  <img :src="article.image" :alt="article.title" class="recommended-image" />
                  <h3 class="recommended-title">{{ article.title }}</h3>
                  <span class="recommended-date">{{ article.publishDate }}</span>
                </div>
              </div>
            </div>
          </main>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 当前分类ID
const currentCategoryId = ref(route.params.categoryId || 'diet')

// 激活的FAQ
const activeFaq = ref(null)

// 筛选和排序选项
const filterOptions = [
  { id: 'all', name: '全部' },
  { id: 'popular', name: '热门' },
  { id: 'newest', name: '最新' },
  { id: 'featured', name: '精选' }
]
const activeFilter = ref('all')
const sortBy = ref('newest')

// 分页
const currentPage = ref(1)
const itemsPerPage = ref(5)

// 所有分类数据
const allCategories = reactive([
  {
    id: 'diet',
    name: '饮食营养',
    description: '科学喂养，为宠物提供均衡的营养',
    color: '#FF6B6B',
    iconBgColor: 'rgba(255, 107, 107, 0.1)',
    icon: 'DietIcon',
    articleCount: 48,
    views: 12500,
    faqCount: 15,
    faqs: [
      {
        id: 1,
        question: '狗狗每天应该吃多少？',
        answer: '狗狗的喂食量取决于其年龄、体重、品种和活动量。一般来说，成年犬每天喂食1-2次，喂食量占其体重的2-3%。幼犬需要更多的喂食次数（3-4次/天），老年犬则可能需要减少喂食量。建议参考宠物食品包装上的喂食指南，并根据狗狗的具体情况进行调整。'
      },
      {
        id: 2,
        question: '猫咪可以吃人类食物吗？',
        answer: '虽然有些人类食物对猫咪无害，但很多人类食物对猫咪是有毒的，如巧克力、洋葱、大蒜、葡萄等。此外，猫咪是严格的肉食动物，需要高蛋白、低碳水化合物的饮食。长期给猫咪喂食人类食物可能导致营养不均衡。建议选择专门为猫咪设计的猫粮。'
      },
      {
        id: 3,
        question: '如何判断宠物是否超重？',
        answer: '可以通过触摸宠物的肋骨来判断。如果无法轻松触摸到肋骨，或者腹部明显下垂，说明宠物可能超重。此外，也可以观察宠物的体型轮廓，健康的宠物应该有明显的腰部曲线。如果不确定，建议咨询兽医。'
      }
    ]
  },
  {
    id: 'health',
    name: '健康医疗',
    description: '预防疾病，保障宠物健康成长',
    color: '#4ECDC4',
    iconBgColor: 'rgba(78, 205, 196, 0.1)',
    icon: 'HealthIcon',
    articleCount: 36,
    views: 9800,
    faqCount: 12,
    faqs: [
      {
        id: 4,
        question: '如何判断狗狗是否健康？',
        answer: '观察狗狗的精神状态、食欲、排便情况和体重变化是判断健康的重要指标。健康的狗狗应该充满活力，有良好的食欲，排便规律且成形，体重稳定。此外，还要注意检查狗狗的眼睛、耳朵、鼻子和皮肤是否有异常。'
      },
      {
        id: 5,
        question: '猫咪为什么会突然不进食？',
        answer: '猫咪不进食可能是由多种原因引起的，包括健康问题（如口腔疾病、消化系统问题）、食物不喜欢、环境变化或压力等。如果猫咪超过24小时不进食，建议及时咨询兽医，因为长时间不进食可能会导致严重的健康问题。'
      }
    ]
  },
  {
    id: 'training',
    name: '行为训练',
    description: '培养良好习惯，增进与宠物的沟通',
    color: '#FFD166',
    iconBgColor: 'rgba(255, 209, 102, 0.1)',
    icon: 'TrainingIcon',
    articleCount: 24,
    views: 8400,
    faqCount: 10,
    faqs: [
      {
        id: 6,
        question: '如何正确训练狗狗定点排便？',
        answer: '训练狗狗定点排便需要耐心和一致性。首先选择一个固定的排便地点，在狗狗饭后、起床后或玩耍后带它到该地点。当狗狗在正确的地点排便时，及时给予奖励和表扬。如果狗狗在错误的地点排便，不要惩罚它，而是将它带到正确的地点，并清理错误地点的气味。'
      },
      {
        id: 7,
        question: '猫咪不听话怎么办？',
        answer: '猫咪的训练与狗狗不同，需要更多的耐心和正强化。猫咪对惩罚非常敏感，可能会导致行为问题恶化。建议使用奖励（如零食、玩具、抚摸）来鼓励猫咪的良好行为，避免使用暴力或大声呵斥。理解猫咪的行为动机也很重要，例如猫咪抓挠家具可能是为了磨爪子或标记领地。'
      }
    ]
  },
  {
    id: 'grooming',
    name: '日常护理',
    description: '清洁美容，保持宠物整洁舒适',
    color: '#6A0572',
    iconBgColor: 'rgba(106, 5, 114, 0.1)',
    icon: 'GroomingIcon',
    articleCount: 18,
    views: 6200,
    faqCount: 8,
    faqs: [
      {
        id: 8,
        question: '如何减少猫咪掉毛？',
        answer: '定期梳理猫咪的毛发可以有效减少掉毛，特别是在换毛季节。选择适合猫咪毛发类型的梳子，每天梳理5-10分钟。此外，保持猫咪的饮食均衡，提供富含Omega-3脂肪酸的食物，也有助于减少掉毛。保持室内环境清洁，定期打扫也能帮助控制毛发问题。'
      },
      {
        id: 9,
        question: '狗狗多久需要洗澡？',
        answer: '狗狗的洗澡频率取决于其品种、活动量和皮肤状况。一般来说，健康的狗狗每2-4周洗澡一次即可。过度洗澡可能会破坏狗狗皮肤的天然油脂平衡，导致皮肤干燥、瘙痒等问题。如果狗狗特别脏或有异味，可以适当增加洗澡频率，但不要超过每周一次。'
      }
    ]
  },
  {
    id: 'breed',
    name: '品种特性',
    description: '了解不同宠物品种的特点和需求',
    color: '#1A535C',
    iconBgColor: 'rgba(26, 83, 92, 0.1)',
    icon: 'BreedIcon',
    articleCount: 32,
    views: 10500,
    faqCount: 14,
    faqs: [
      {
        id: 10,
        question: '如何选择适合自己的宠物品种？',
        answer: '选择宠物品种时，应考虑自己的生活方式、居住环境、时间和经济能力等因素。例如，如果你住在小公寓，可能更适合养小型犬或猫咪；如果你有过敏史，可能需要选择低过敏品种；如果你工作繁忙，可能需要选择独立性较强的品种。建议在选择前充分了解不同品种的特点和需求。'
      },
      {
        id: 11,
        question: '混种犬和纯种犬有什么区别？',
        answer: '混种犬通常比纯种犬更健康，因为它们的基因多样性更高，患遗传性疾病的风险较低。纯种犬则有更稳定的性格和外貌特征，适合那些对宠物有特定需求的人。无论选择哪种，最重要的是提供足够的关爱和照顾。'
      }
    ]
  },
  {
    id: 'environment',
    name: '生活环境',
    description: '为宠物创造安全舒适的生活空间',
    color: '#F7B801',
    iconBgColor: 'rgba(247, 184, 1, 0.1)',
    icon: 'EnvironmentIcon',
    articleCount: 22,
    views: 7300,
    faqCount: 9,
    faqs: [
      {
        id: 12,
        question: '如何为猫咪创造安全的居家环境？',
        answer: '为猫咪创造安全的居家环境，需要注意以下几点：1. 收纳好有毒物质（如清洁剂、药物、植物等）；2. 确保窗户和阳台有防护网；3. 避免使用对猫咪有害的物品（如百合花、巧克力等）；4. 提供猫咪专用的抓板和玩具；5. 为猫咪提供安静的休息空间。'
      },
      {
        id: 13,
        question: '狗狗需要多大的活动空间？',
        answer: '狗狗所需的活动空间取决于其品种、年龄和能量水平。大型犬和高能量犬通常需要更多的活动空间和运动时间，而小型犬和低能量犬则相对较少。即使是住在公寓里的狗狗，只要每天有足够的户外活动时间（如散步、跑步、玩耍），也能保持健康快乐。'
      }
    ]
  }
])

// 热门标签
const热门Tags = reactive([
  { id: 1, name: '幼犬饲养', count: 28 },
  { id: 2, name: '猫咪健康', count: 24 },
  { id: 3, name: '训练技巧', count: 20 },
  { id: 4, name: '饮食搭配', count: 18 },
  { id: 5, name: '疾病预防', count: 16 },
  { id: 6, name: '美容护理', count: 14 },
  { id: 7, name: '品种选择', count: 12 },
  { id: 8, name: '老年宠物', count: 10 }
])

// 模拟文章数据
const articlesData = reactive([
  {
    id: 1,
    title: '狗狗科学饮食指南：不同年龄段的营养需求',
    excerpt: '了解狗狗在幼年、成年和老年阶段的不同营养需求，为您的爱宠提供最适合的饮食方案。',
    image: '@/assets/pixel-pets.png',
    category: 'diet',
    publishDate: '2023-10-10',
    readCount: 1258,
    commentCount: 42,
    tags: ['狗狗', '营养', '饮食搭配']
  },
  {
    id: 2,
    title: '猫咪常见健康问题及预防措施',
    excerpt: '掌握猫咪常见疾病的早期症状和预防方法，让您的猫咪保持健康活力。',
    image: '@/assets/pixel-cats.png',
    category: 'health',
    publishDate: '2023-09-28',
    readCount: 985,
    commentCount: 35,
    tags: ['猫咪', '健康', '疾病预防']
  },
  {
    id: 3,
    title: '幼犬基础训练：从服从指令到社交化',
    excerpt: '通过科学的训练方法，帮助幼犬建立良好的行为习惯，顺利融入家庭生活。',
    image: '@/assets/1.png',
    category: 'training',
    publishDate: '2023-09-15',
    readCount: 842,
    commentCount: 28,
    tags: ['狗狗', '训练', '幼犬饲养']
  },
  {
    id: 4,
    title: '猫咪日常护理：毛发梳理与口腔清洁',
    excerpt: '学习正确的猫咪护理方法，保持猫咪的毛发健康和口腔卫生。',
    image: '@/assets/2.png',
    category: 'grooming',
    publishDate: '2023-09-05',
    readCount: 721,
    commentCount: 22,
    tags: ['猫咪', '美容护理', '日常护理']
  },
  {
    id: 5,
    title: '如何为狗狗选择合适的玩具',
    excerpt: '不同年龄、品种和性格的狗狗对玩具有不同的需求，了解这些有助于为您的爱宠选择最适合的玩具。',
    image: '@/assets/3.png',
    category: 'environment',
    publishDate: '2023-08-28',
    readCount: 689,
    commentCount: 19,
    tags: ['狗狗', '玩具', '生活环境']
  },
  {
    id: 6,
    title: '猫咪品种指南：如何选择适合自己的猫咪',
    excerpt: '了解不同猫咪品种的性格特点、护理需求和适应环境的能力，帮助您做出最适合自己的选择。',
    image: '@/assets/Hero.png',
    category: 'breed',
    publishDate: '2023-08-15',
    readCount: 1023,
    commentCount: 38,
    tags: ['猫咪', '品种选择', '养猫指南']
  },
  {
    id: 7,
    title: '狗狗肥胖问题：原因、危害与解决方案',
    excerpt: '狗狗肥胖已成为一个日益严重的问题，了解其原因和危害，以及如何帮助狗狗控制体重。',
    image: '@/assets/pixel-pets.png',
    category: 'health',
    publishDate: '2023-08-05',
    readCount: 786,
    commentCount: 25,
    tags: ['狗狗', '健康', '肥胖']
  },
  {
    id: 8,
    title: '猫咪行为解读：理解您的猫咪想表达什么',
    excerpt: '猫咪的许多行为都有特定的含义，学习解读这些行为，有助于增进您与猫咪之间的沟通和理解。',
    image: '@/assets/pixel-cats.png',
    category: 'training',
    publishDate: '2023-07-25',
    readCount: 897,
    commentCount: 32,
    tags: ['猫咪', '行为', '训练技巧']
  }
])

// 获取当前分类数据
const category = computed(() => {
  return allCategories.find(cat => cat.id === currentCategoryId.value) || allCategories[0]
})

// 获取当前分类的文章
const categoryArticles = computed(() => {
  return articlesData.filter(article => article.category === currentCategoryId.value)
})

// 计算排序后的文章
const sortedArticles = computed(() => {
  let filteredArticles = [...categoryArticles.value]
  
  // 根据筛选条件过滤
  if (activeFilter.value === 'popular') {
    filteredArticles = filteredArticles.sort((a, b) => b.readCount - a.readCount)
  } else if (activeFilter.value === 'newest') {
    filteredArticles = filteredArticles.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
  } else if (activeFilter.value === 'featured') {
    // 假设前3篇是精选文章
    filteredArticles = filteredArticles.slice(0, 3)
  }
  
  // 根据排序方式排序
  if (sortBy.value === 'newest') {
    filteredArticles = filteredArticles.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate))
  } else if (sortBy.value === 'popular') {
    filteredArticles = filteredArticles.sort((a, b) => b.readCount - a.readCount)
  } else if (sortBy.value === 'alphabetical') {
    filteredArticles = filteredArticles.sort((a, b) => a.title.localeCompare(b.title))
  }
  
  // 计算分页
  const startIndex = (currentPage.value - 1) * itemsPerPage.value
  const endIndex = startIndex + itemsPerPage.value
  
  return filteredArticles.slice(startIndex, endIndex)
})

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(categoryArticles.value.length / itemsPerPage.value)
})

// 获取推荐文章
const recommendedArticles = computed(() => {
  // 获取其他分类的文章作为推荐
  const otherArticles = articlesData.filter(article => article.category !== currentCategoryId.value)
  // 按阅读量排序并取前3篇
  return otherArticles.sort((a, b) => b.readCount - a.readCount).slice(0, 3)
})

// 导航到其他分类
const navigateToCategory = (categoryId) => {
  router.push(`/pet-knowledge/${categoryId}`)
  currentCategoryId.value = categoryId
  currentPage.value = 1
  activeFilter.value = 'all'
}

// 查看文章详情
const viewArticleDetail = (articleId) => {
  router.push(`/pet-knowledge/article/${articleId}`)
}

// 按标签筛选
const filterByTag = (tagName) => {
  // 这里可以添加按标签筛选的逻辑
  console.log('筛选标签：', tagName)
}

// 处理排序变化
const handleSortChange = () => {
  currentPage.value = 1
}

// 切换FAQ显示/隐藏
const toggleFaq = (faqId) => {
  if (activeFaq.value === faqId) {
    activeFaq.value = null
  } else {
    activeFaq.value = faqId
  }
}

// 分页控制
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

const goToPage = (page) => {
  currentPage.value = page
}

// 定义图标组件
const defineComponent = (name, path) => {
  const component = {
    name,
    template: `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="${path}" fill="currentColor"/>
    </svg>`
  }
  return component
}

// 饮食营养图标
const DietIcon = defineComponent('DietIcon', 'M3 11H21V13H3V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z')

// 健康医疗图标
const HealthIcon = defineComponent('HealthIcon', 'M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM10 17L6 13L7.41 11.59L10 14.17L16.59 7.59L18 9L10 17Z')

// 行为训练图标
const TrainingIcon = defineComponent('TrainingIcon', 'M9 21C8.45 21 7.97903 20.7893 7.58787 20.4121C7.1967 20.0349 7 19.55 7 19V15H5C3.9 15 3 14.1 3 13V11C3 9.9 3.9 9 5 9H7V5C7 4.45 7.1967 3.96511 7.58787 3.58787C7.97903 3.21063 8.45 3 9 3H15C15.55 3 16.0349 3.21063 16.4121 3.58787C16.7943 3.96511 17 4.45 17 5V9H19C20.1 9 21 9.9 21 11V13C21 14.1 20.1 15 19 15H17V19C17 19.55 16.7943 20.0349 16.4121 20.4121C16.0349 20.7893 15.55 21 15 21H9ZM9 5H15V9H9V5ZM19 13H5V11H19V13ZM17 19V15H7V19H17Z')

// 日常护理图标
const GroomingIcon = defineComponent('GroomingIcon', 'M12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16ZM12 18C9.33 18 3 16.21 3 12C3 9.9 3.84 8.03 5.24 6.57L3.76 5.09C2.25 6.88 1 9.21 1 12C1 17.52 5.48 22 11 22V20C7.14 20 4 17.86 4 15H10V18H12Z')

// 品种特性图标
const BreedIcon = defineComponent('BreedIcon', 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 14.5C9.48 14.5 7.5 12.52 7.5 10C7.5 7.48 9.48 5.5 12 5.5C14.52 5.5 16.5 7.48 16.5 10C16.5 12.52 14.52 14.5 12 14.5ZM16.24 16.24C14.95 17.52 13.05 18.5 11 18.5C8.95 18.5 7.05 17.52 5.76 16.24C5.32 15.8 5.03 15.23 5 14.64V17.5C5 18.03 5.21 18.54 5.58 18.91C5.96 19.29 6.47 19.5 7 19.5H17C17.53 19.5 18.04 19.29 18.42 18.91C18.79 18.54 19 18.03 19 17.5V14.64C18.97 15.23 18.68 15.8 18.24 16.24Z')

// 生活环境图标
const EnvironmentIcon = defineComponent('EnvironmentIcon', 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 7C13.66 7 15 8.34 15 10C15 11.66 13.66 13 12 13C10.34 13 9 11.66 9 10C9 8.34 10.34 7 12 7ZM12 11C12.55 11 13 10.55 13 10C13 9.45 12.55 9 12 9C11.45 9 11 9.45 11 10C11 10.55 11.45 11 12 11ZM12 16.2C13.77 16.2 15.2 14.77 15.2 13C15.2 11.23 13.77 9.8 12 9.8C10.23 9.8 8.8 11.23 8.8 13C8.8 14.77 10.23 16.2 12 16.2Z')

// 监听路由变化
onMounted(() => {
  const updateCategory = () => {
    if (route.params.categoryId) {
      currentCategoryId.value = route.params.categoryId
    }
  }
  
  // 初始更新
  updateCategory()
  
  // 监听路由变化
  const unsubscribe = router.afterEach(updateCategory)
  
  // 清理函数
  return () => unsubscribe()
})
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #ff7f00;
  --primary-hover: #e66f00;
  --secondary-color: #4CAF50;
  --text-primary: #333;
  --text-secondary: #666;
  --text-light: #999;
  --background-light: #f5f5f5;
  --white: #ffffff;
  --border-color: #e0e0e0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
  --radius: 8px;
  --transition: all 0.3s ease;
}

/* 页面整体样式 */
.category-page {
  min-height: 100vh;
  background-color: var(--background-light);
}

/* 页面头部 */
.category-header {
  padding: 60px 0;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.category-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/pixel-pets.png');
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: 1;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.category-icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
}

.header-text h1 {
  font-size: 48px;
  margin: 0 0 8px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.header-text p {
  font-size: 20px;
  margin: 0;
  opacity: 0.9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.main-content {
  padding: 40px 0;
}

.content-wrapper {
  display: flex;
  gap: 30px;
}

/* 侧边栏 */
.sidebar {
  width: 280px;
  flex-shrink: 0;
}

.sidebar-section {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.sidebar-section h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}

.category-item:hover {
  background-color: rgba(255, 127, 0, 0.05);
}

.category-item.active {
  background-color: rgba(255, 127, 0, 0.1);
  border-left: 4px solid var(--primary-color);
}

.category-bullet {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.category-name {
  flex: 1;
  font-size: 16px;
  color: var(--text-primary);
}

.category-count {
  font-size: 14px;
  color: var(--text-light);
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 12px;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background-color: #f0f0f0;
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.tag:hover {
  background-color: rgba(255, 127, 0, 0.1);
  color: var(--primary-color);
}

.tag-count {
  font-size: 12px;
  color: var(--text-light);
}

.category-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.stat-item {
  flex: 1;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 主内容 */
.content {
  flex: 1;
}

/* 筛选和排序 */
.filter-sort-section {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow);
}

.filter-options {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  background: none;
  border: 2px solid var(--border-color);
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.filter-btn.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-options label {
  font-size: 14px;
  color: var(--text-secondary);
}

.sort-options select {
  padding: 8px 12px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-secondary);
  background-color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.sort-options select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 文章列表 */
.articles-section h2,
.faq-section h2,
.recommended-section h2 {
  font-size: 24px;
  color: var(--text-primary);
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-color);
}

.article-item {
  display: flex;
  gap: 20px;
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.article-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.article-image {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.article-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-item:hover .article-image img {
  transform: scale(1.05);
}

.article-content {
  flex: 1;
}

.article-content h3 {
  font-size: 20px;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.article-excerpt {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-light);
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.article-tag {
  padding: 4px 12px;
  background-color: #f0f0f0;
  border-radius: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}

.page-btn:hover:not(:disabled) {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 8px;
}

.page-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}

.page-number:hover:not(.active) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.page-number.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

/* 常见问题 */
.faq-section {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: var(--shadow);
}

.faq-list {
  margin-top: 24px;
}

.faq-item {
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: var(--transition);
  background-color: #f9f9f9;
}

.faq-question:hover {
  background-color: rgba(255, 127, 0, 0.05);
}

.faq-question h3 {
  font-size: 18px;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-icon.active {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 20px;
  background-color: var(--white);
}

.faq-answer p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* 推荐阅读 */
.recommended-section {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.recommended-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.recommended-item {
  cursor: pointer;
  transition: var(--transition);
}

.recommended-item:hover {
  transform: translateY(-4px);
}

.recommended-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 12px;
}

.recommended-title {
  font-size: 16px;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.recommended-date {
  font-size: 14px;
  color: var(--text-light);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .content-wrapper {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  .sidebar-section:last-child {
    grid-column: 1 / -1;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .header-text h1 {
    font-size: 36px;
  }
  
  .article-item {
    flex-direction: column;
  }
  
  .article-image {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 768px) {
  .category-header {
    padding: 40px 0;
  }
  
  .header-text h1 {
    font-size: 28px;
  }
  
  .header-text p {
    font-size: 18px;
  }
  
  .sidebar {
    grid-template-columns: 1fr;
  }
  
  .filter-sort-section {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  
  .filter-options {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .sort-options {
    justify-content: center;
  }
  
  .articles-section h2,
  .faq-section h2,
  .recommended-section h2 {
    font-size: 20px;
  }
  
  .article-content h3 {
    font-size: 18px;
  }
  
  .faq-question h3 {
    font-size: 16px;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .category-icon {
    width: 80px;
    height: 80px;
  }
  
  .header-text h1 {
    font-size: 24px;
  }
  
  .header-text p {
    font-size: 16px;
  }
  
  .sidebar-section,
  .article-item,
  .faq-section,
  .recommended-section {
    padding: 16px;
  }
  
  .article-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .recommended-grid {
    grid-template-columns: 1fr;
  }
  
  .page-numbers {
    display: none;
  }
}
</style>